<template>
 <el-dialog
    custom-class="rs-dialog rs-add-user-dlg"
    :append-to-body="true"
    :title="title"
    :visible.sync="dlgVisible"
    :close-on-click-modal="false"
    :before-close="()=>handleClose('cancel')"
    width="500px">
    <div style="position:relative;padding:2px 1px;">
        <div class="rs-toolbar">
            <el-input v-model="jsmc" type="text" clearable placeholder="请输入角色名..." size="small" style="width:200px;vertical-align: middle;"></el-input>
            <el-button-group>
                <el-button type="success" size="small" icon="el-icon-circle-close" on-click="loadRoles">查询</el-button>
                <el-button type="danger" size="small" icon="el-icon-circle-close" on-click="onClearQuery">清空</el-button>
            </el-button-group>
        </div>
        <el-table
            ref="table"
            :key="key"
            :max-height="tableHeight"
            :height="tableHeight"
            :data="roles"
            border
            style="width: 100%"
            size="small"
            @selection-change="onSelectionChange"
            >
                <el-table-column v-if="dlgType===2" type="index" width="50"></el-table-column>
                <el-table-column v-else type="selection" width="50"></el-table-column>
                <el-table-column prop="jsnm" label="角色编号" width="150"></el-table-column>
                <el-table-column prop="jsmc" label="角色名称"></el-table-column>
        </el-table>
        <RsPagination :currentPage="currentPage" :pageSize="pageSize" :totalCount="totalCount" @change="onPageChange"></RsPagination>
    </div>
    <span slot="footer" class="dialog-footer">
        <template v-if="dlgType !=2" >
            <el-button size="small" @click="handleClose('cancel')">取&emsp;消</el-button>
            <el-button size="small" type="primary" @click="handleClose('ok')">确&emsp;定</el-button>
        </template>
        <template v-else>
            <el-button size="small" type="primary" @click="handleClose('cancel')">退 出</el-button>
        </template>
    </span>
</el-dialog>
</template>
<script>
import msg from '../../mixin/msg'
import deepmerge from 'deepmerge';
import dlg from '../../mixin/dlg';
import user from '@/api/user'
export default {
    name:"UserRoleDlg",
    mixins:[dlg,msg],
    data(){
        return {
            key:0,
            currentPage:0,
            pageSize:20,
            totalCount:0,
            tableHeight:300,
            jsmc:'',
            yhbh:'',
            dlgType:0,
            roles:[],
            selectRows:[]
        }
    },
    computed:{
        columnType(){

            return this.dlgType==2?'index':'selection'
        }
    },
    methods:{
        onShow(data){

            this.key ++;
            this.dlgType = data.type;
            this.yhbh = data.yhbh;
            this.roles = [];
            this.selectRows = [];
            if( data.type == 0 ){
                this.title = "添加角色";
            }
            else if(data.type == 1){
                this.title = "删除角色";
            }else{
                this.title = "角色信息";
            }
            this.loadRoles();
        },
        onOk(){
            if( this.selectRows.length <=0 ){

                this.showInfo("请选择要添加的角色");
            }else{
                
                const postData = {
                    yhbh:this.yhbh,
                    ids:this.selectRows.map((item)=>item.jsbh)
                }
                //console.log(postData)
                user.saveRole(this.dlgType,postData)
                .then(response => {
                    const { data } = response;
                    if( data.error_code == 0 ){
                        this.closeDialog('ok');
                    }else{
                        this.showError("操作失败！");
                    }
                }).catch(error => {
                    this.showError("本地异常！");
                });
            }            
        },
        onPageChange(obj){
            this.currentPage = obj.currentPage;
            this.pageSize = obj.pageSize;
            this.loadRoles();
        },
        loadRoles(){

            const queryData = {
                    jsmc:this.jsmc,
                }
            if( this.dlgType == 0 ){
                queryData['noyhbh'] = this.yhbh;
            }else{
                queryData['yhbh'] = this.yhbh;
            }
            user.queryRole(queryData)
            .then(response => {
                const { data } = response;
                if( data.error_code == 0 ){
                    
                    this.roles = data.list;
                    this.totalCount = data.totalCount;
                }else{
                    this.showError("操作失败！");
                }
            }).catch(error => {
            });
        },
        onClearQuery(){
            this.yhmc = "";
        },
        onSelectionChange(rows){
            //console.log(rows)
            this.selectRows = rows;
        }
    }
}
</script>
<style lang="scss">
.rs-add-user-dlg{
    .el-dialog__body{
        padding: 0;
    }
}
</style>